<template>
  <el-container v-title data-title="啊哩哩 一个视频弹幕网站~~~">
    <el-aside width="200px">
      <el-affix :offset="62" z-index="200">
        <div class="scroll">
          <ul class="channel-list">
            <li
              class="link"
              :style="{
                'background-color': nowChannel === 1 ? '#f5f5f5' : 'white',
              }"
              @click="
                () => {
                  if (!isSettingChannel) {
                    nowChannel = 1;
                    router.toMain();
                  }
                }
              "
            >
              <el-icon color="#555555">
                <HomeFilled />
              </el-icon>
              <span>首页</span>
            </li>
            <li
              class="link"
              :style="{
                'background-color': nowChannel === 2 ? '#f5f5f5' : 'white',
              }"
              @click="
                () => {
                  if (!isSettingChannel) {
                    nowChannel = 2;
                    router.toRank();
                  }
                }
              "
            >
              <el-icon color="#555555">
                <Histogram />
              </el-icon>
              <span>排行榜</span>
            </li>
          </ul>
          <el-divider />
          <div class="channel-setting">
            <span>频道</span>
            <a @click="channelSetSwitch" title="频道管理">
              <el-icon>
                <Setting v-if="!isSettingChannel" />
                <Select v-else />
              </el-icon>
            </a>
          </div>
          <div ref="draggableContainer" class="channel-list">
            <main
              v-for="item in userChannel"
              v-show="item[1] || isSettingChannel"
              :key="item[0]"
              class="link"
              :style="{
                'background-color':
                  nowChannel === item[0] || isSettingChannel
                    ? '#f5f5f5'
                    : 'white',
              }"
              @click="
                () => {
                  if (!isSettingChannel) {
                    router.toChannel(item[0]);
                    nowChannel = item[0];
                  }
                }
              "
            >
              <section class="draggable-item">
                <el-icon>
                  <VideoCamera v-if="channelList[item[0]].icon === 'camera'" />
                  <Coordinate v-if="channelList[item[0]].icon === 'game'" />
                  <Service v-if="channelList[item[0]].icon === 'music'" />
                  <Reading v-if="channelList[item[0]].icon === 'study'" />
                  <KnifeFork v-if="channelList[item[0]].icon === 'food'" />
                  <CoffeeCup v-if="channelList[item[0]].icon === 'daily'" />
                  <Cpu v-if="channelList[item[0]].icon === 'technology'" />
                  <Basketball v-if="channelList[item[0]].icon === 'sports'" />
                  <Cloudy v-if="channelList[item[0]].icon === 'pets'" />
                  <Goods v-if="channelList[item[0]].icon === 'shopping'" />
                </el-icon>

                <span>{{ channelList[item[0]].content }}</span>
                <div v-show="isSettingChannel">
                  <el-icon color="#555555">
                    <Sort />
                  </el-icon>
                  <el-icon
                    v-if="item[1]"
                    @click="item[1] = false"
                    color="#3a8ee6"
                  >
                    <View />
                  </el-icon>
                  <el-icon v-else @click="item[1] = true" color="grey">
                    <Hide />
                  </el-icon>
                </div>
              </section>
            </main>
          </div>
        </div>
      </el-affix>
    </el-aside>

    <div class="el-main">
      <router-view></router-view>
    </div>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import store from "@/store/store";
import router from "@/router/router";
import { useRoute } from "vue-router";
import Sortable from "sortablejs";
import { isNull, loading, successNotify } from "@/utils/common";
import userApi from "@/api/user";
import {
  HomeFilled,
  Histogram,
  Setting,
  Select,
  View,
  Hide,
  VideoCamera,
  Service,
  Reading,
  Coordinate,
  KnifeFork,
  Goods,
  Basketball,
  CoffeeCup,
  Cpu,
  Cloudy,
  Sort,
} from "@element-plus/icons-vue";
import { Channel } from "@/types/user";

const channelList = store().channelList;
const userChannel = ref<Array<Channel>>([
  [3, true],
  [4, true],
  [5, true],
  [6, true],
  [7, true],
  [8, true],
  [9, true],
  [10, true],
  [11, true],
  [12, true],
]);
// 监听登录用的频道排序字段，并将其转为数组
const watchChannelSort = watch(
  () => store().userInfo.channelSort,
  (val) => {
    if (!isNull(val) && val !== undefined) {
      userChannel.value = JSON.parse(val);
    }
  },
  { immediate: true }
);
// 是否正在设置channel
const isSettingChannel = ref(false);
const nowChannel = ref(1);
const route = useRoute();

const channelSetSwitch = () => {
  if (isSettingChannel.value) {
    const load = loading();
    userApi.updateChannel(userChannel.value).then((res) => {
      load.close();
      if (res.data.code === 0) {
        successNotify(res.data.data);
      }
    });
    // 销毁排序对象
    sortable.value?.destroy();
  } else {
    // 初始化排序对象
    initDraggable();
  }
  isSettingChannel.value = !isSettingChannel.value;
};

// 排序的标签对象
const draggableContainer = ref<HTMLElement | null>(null);
// 排序对象
const sortable = ref<any>();
// 初始化排序组件
const initDraggable = () => {
   // @ts-ignore
  sortable.value = Sortable.create(draggableContainer.value, {
    dragClass: "drag",
    forceFallback: true,
    animation: 300,
    onUpdate(e: any) {
      // 删除拖拽的元素
      const item = userChannel.value.splice(e.oldIndex, 1)[0];
      // 把删除的元素放到新的位置
      userChannel.value.splice(e.newIndex, 0, item);
    },
  });
};

onMounted(() => {
  let nowPath = route.fullPath;
  if (nowPath.indexOf("rank") > 0) {
    nowChannel.value = 2;
  } else if (nowPath.indexOf("channel") > 0) {
    nowChannel.value = Number(route.params.id);
  } else {
    nowChannel.value = 1;
  }
});

onUnmounted(() => {
  watchChannelSort();
});
</script>

<style lang="scss" scoped>
@import "./main.scss";
</style>
